<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <h2>{{reveMsg}}</h2>
        <input type="text"  v-model="price">
        价格是
        <p>人名币：{{rmb}}</p>
        <p>美元：{{dolor}}</p>
        <p>time:{{time}}</p>
        <p>tip:{{text}}</p>
        <input type="text" v-model="name">
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',//element，挂载的容器
            data:{
                msg:"Hello Vue!",
                price:12,
                tip:'哈哈',
                name:''
            },
            computed:{
                reveMsg(){
                    return this.msg.split('').reverse().join('')
                },
                rmb(){
                    let p = parseFloat(this.price)
                    if(isNaN(p)){
                        p = 0
                    }       
                    return p.toFixed(2)+'￥'
                },
                dolor(){
                    let p = parseFloat(this.price)
                    if(isNaN(p)){
                        p = 0
                    }  
                    return (p/6.9).toFixed(2)+'$'
                },
                time(){
                    return new Date()
                },
                text:{
                    get(){
                        return '你好'+this.tip
                    },
                    set(val){
                        console.log('你在设置text的值'+val)
                        this.tip = val
                    }
                }
            },
            watch:{
                name(newValue,oldValue){
                    console.log('你改变了name')
                    console.log(`新值:${newValue}`)
                    console.log(`旧值"${oldValue}`)
                }
            }
        })
    </script>
    
</body>
</html>